<template>
    <div class="home">
        <!-- 生涯统计 -->
        <div class="career-count">
            <div class="title">
                <div>游戏模式</div>
                <div>总场次</div>
                <div>胜率</div>
                <div>胜场</div>
                <div>负场</div>
                <div>段位</div>
                <div>胜点</div>
            </div>
            <div class="li-1">
                <div>单双排位</div>
                <div>{{ soloData.count }}</div>
                <div>{{ soloData.probability }}%</div>
                <div>{{ soloData.wins }}</div>
                <div>{{ soloData.losses }}</div>
                <div>{{ soloData.highest }}</div>
                <div>{{ soloData.leaguePoints }}</div>
            </div>
            <div class="li-2">
                <div>灵活组排</div>
                <div>{{ flexData.count }}</div>
                <div>{{ flexData.probability }}%</div>
                <div>{{ flexData.wins }}</div>
                <div>{{ flexData.losses }}</div>
                <div>{{ flexData.highest }}</div>
                <div>{{ flexData.leaguePoints }}</div>
            </div>
        </div>
        <!-- 近期战绩计分板 -->
        <div class="scoreboard">
            <div class="title">近期输赢(20局)</div>
            <div class="content">
                <div class="win-count">{{ this.matchHistoryWin }}</div>
                <div class="defeat-count">{{ this.matchHistoryLosse }}</div>
            </div>
        </div>
    </div>
</template>

<script>
const { ipcRenderer } = window.require('electron')
import { mapGetters } from "vuex";
export default {
    name: 'Home',
    data() {
        return {
            soloData: {},
            flexData: {},
            matchHistoryWin: 0,
            matchHistoryLosse: 0,

        }
    },
    created() {
        // 过早的请求貌似会失败,可能是还没获取到key,先加一个定时器解决
        setTimeout(() => {
            this.getRankedData()
            this.getMatchHistory()
        }, 500)
    },
    methods: {
        ...mapGetters(['getStoreUserInfo']),
        // 获取当前玩家段位信息
        async getRankedData() {
            const result = ipcRenderer.sendSync('getRankedData:vue');
            console.log(result.queueMap);
            const data = result.queueMap
            this.soloData = {
                // 总场次
                count: data.RANKED_SOLO_5x5.wins + data.RANKED_SOLO_5x5.losses,
                // 胜率
                probability: parseInt((data.RANKED_SOLO_5x5.wins / (data.RANKED_SOLO_5x5.wins + data.RANKED_SOLO_5x5.losses)) * 100),
                // 胜场
                wins: data.RANKED_SOLO_5x5.wins,
                // 负场
                losses: data.RANKED_SOLO_5x5.losses,
                // 段位
                highest: data.RANKED_SOLO_5x5.highestTier + data.RANKED_SOLO_5x5.highestDivision,
                // 胜点
                leaguePoints: data.RANKED_SOLO_5x5.leaguePoints,

            }
            this.flexData = {
                // 总场次
                count: data.RANKED_FLEX_SR.wins + data.RANKED_FLEX_SR.losses,
                // 胜率
                probability: parseInt((data.RANKED_FLEX_SR.wins / (data.RANKED_FLEX_SR.wins + data.RANKED_FLEX_SR.losses)) * 100),
                // 胜场
                wins: data.RANKED_FLEX_SR.wins,
                // 负场
                losses: data.RANKED_FLEX_SR.losses,
                // 段位
                highest: data.RANKED_FLEX_SR.highestTier + data.RANKED_FLEX_SR.highestDivision,
                // 胜点
                leaguePoints: data.RANKED_FLEX_SR.leaguePoints,

            }
        },
        // 获取历史战绩
        async getMatchHistory() {
            const puuid = this.getStoreUserInfo().puuid
            const result = ipcRenderer.sendSync('getMatchHistory:vue', { puuid });
            for (let i = 0; i < result.games.gameCount; i++) {
                // 查询这局胜负
                if (result.games.games[i].participants[0].stats.win) {
                    this.matchHistoryWin = this.matchHistoryWin + 1
                } else {
                    this.matchHistoryLosse = this.matchHistoryLosse + 1
                }
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.home {
    padding: 40px;

    .career-count {
        height: 60px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 12px;
        color: #323232;



        .title {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 0 10px;
            height: 20px;
            line-height: 20px;

            div {
                width: 50px;
                text-align: center;

            }
        }

        .li-1 {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 0 10px;
            height: 20px;
            line-height: 20px;
            background-color: #f4f4f4;

            div {
                width: 50px;
                text-align: center;


            }

        }

        .li-2 {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 0 10px;
            height: 20px;
            line-height: 20px;

            div {
                width: 50px;
                text-align: center;
            }
        }
    }

    .scoreboard {
        margin-top: 40px;
        width: 658px;
        height: 330px;
        border: 1px solid #ccc;
        border-radius: 5px;

        .title {
            display: flex;
            justify-content: space-between;
            padding: 11px 0 0 40px;
            width: 660px;
            height: 50px;
            font-size: 20px;
            box-sizing: border-box;
        }

        .content {
            display: flex;
            justify-content: space-between;
            width: 658px;

            .win-count {
                width: 329px;
                height: 280px;
                text-align: center;
                line-height: 280px;
                font-size: 72px;
                color: #fff;
                background-color: #7BED9F;
            }

            .defeat-count {
                width: 329px;
                height: 280px;
                text-align: center;
                line-height: 280px;
                font-size: 72px;
                color: #fff;
                background-color: #FF6B81;
            }
        }
    }
}
</style>